<script setup>
import { onMounted } from 'vue';
import request from '@/utils/request';
import * as echarts from 'echarts';

onMounted(() => {
  drawLine();
});

const drawLine = () => {
  const myChart = echarts.init(document.getElementById('myChart'));
  const option = {
    title: {
      text: '用户地区统计图',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      trigger: 'item',
      left: 'center'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '用户比例',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '60%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: []
      }
    ]
  };

  request.get("/user/count").then((res) => {
    if (res.code === '0') {
      console.log('统计结果是', res.data);
      const data = res.data;
      for (const key in data) {
        option.series[0].data.push({ name: key, value: data[key] });
      }
      myChart.setOption(option);
    }
  });
};
</script>

<template>
  <div style="padding: 10px">
    <div id="myChart" :style="{ width: '600px', height: '500px' }"></div>
  </div>
</template>

<style scoped></style>
